<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/animate.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/reset.css">

    <!-- Include demo stylesheet -->
    <link href="./slider/style.css" rel="stylesheet" type="text/css">

    <!-- Get jQuery from CDN -->
    <script src="./slider/jquery.min.js"></script>
    <script src="./slider/jquery-migrate-1.2.1.min.js"></script>

    <!-- Include the slider scripts -->
    <script type="text/javascript" src="./slider/transit.js"></script>
    <script type="text/javascript" src="./slider/touchSwipe.js"></script>
    <script type="text/javascript" src="./slider/simpleSlider.js"></script>
    <script type="text/javascript" src="./slider/backstretch.js"></script>
    <script type="text/javascript" src="./slider/custom.js"></script>

    <title>Leaf</title>
</head>

<body>
    <div class="lg_yimi">
        <header class="yimiTop" title="Home"></header>
        <!--轮播图-->
        <div class='pagewrap story'>
            <div class='pageblock' id='fullscreen'>
                <div class='slider'>
                    <div class='slide' id="first1">
<!--                            <div class="button" onclick="mainslider.nextSlide();">Let me show you how simple</div>-->
                    </div>
                    <div class='slide' id="sec">
                    </div>
                    <div class='slide' id="thirth">
                    </div>
                    <div class='slide' id="fourth">
                    </div>
                </div>
            </div>
        </div>
        <div>
        <section id="first" class="story sectionBox1" data-speed="8" data-type="background">
            <!-- <div class="smashinglogo" data-type="sprite" data-offsety="100" data-xposition="100%" data-speed="-2"
                style="background-position: 50% 100px;">
            </div> -->
            <article>
                <div class="w1184">
                    <div id="homeGoods" style="height:300px;">
                        <img src="http://ym.hutugod.top/coating-001.png" alt="">
                        <img src="http://ym.hutugod.top/coating-002.png" alt="">
                        <img src="http://ym.hutugod.top/coating-003.png" alt="">
                        <img src="http://ym.hutugod.top/coating-004.png" alt="">
                        <img src="http://ym.hutugod.top/coating-005.png" alt="">
                        <img src="http://ym.hutugod.top/coating-006.png" alt="">
                        <img src="http://ym.hutugod.top/coating-007.png" alt="">
                        <img src="http://ym.hutugod.top/coating-008.png" alt="">
                        <img src="http://ym.hutugod.top/coating-009.png" alt="">
                        <img src="http://ym.hutugod.top/coating-010.png" alt="">
                        <img src="http://ym.hutugod.top/coating-011.png" alt="">
                        <img src="http://ym.hutugod.top/coating-012.png" alt="">
                        <img src="http://ym.hutugod.top/coating-013.png" alt="">
                        <img src="http://ym.hutugod.top/coating-101.png" alt="">
                    </div>
                </div>
            </article>
        </section>
        <section id="second" class="story sectionBox2" data-speed="4" data-type="background">
            <article>
                <div class="w1184">
                    <h4>Main Product category</h4>
                    <ul>
                        <li>
                            <img onclick="location.href='./coatings.html'" src="http://xiaoyedianao.gitee.io/picture_storage_area/images/mesa1.png " alt=" ">
                            <p>Powder Coatings</p>
                        </li>
                        <li>
                            <img onclick="location.href='./additives.html'" src="http://xiaoyedianao.gitee.io/picture_storage_area/images/mesa2.png " alt=" ">
                            <p>Additives for powder coatings</p>
                        </li>
                        <li>
                            <img onclick="location.href='./fillers.html'" src="http://xiaoyedianao.gitee.io/picture_storage_area/images/mesa3.png " alt=" ">
                            <p>Functional Fillers</p>
                        </li>
                    </ul>
                    <p id="content">To provide the best products and technical solutions for customers!</p>
                </div>
            </article>
        </section>
        <section id="third" class="story sectionBox3" data-speed="6" data-type="background" data-offsety="250">
            <article>
                <div class="w1184">
                    <h4>R & D And Production</h4>
                    <ul>
                        <li>Yichang</li>
                        <li>Wuhan</li>
                        <li>Beijing</li>
                    </ul>
                </div>
            </article>
        </section>
        </div>
        <section id="four" class="story sectionBox4" data-speed="6" data-type="background" data-offsety="250"
            style="background-position: 50% 50px;">
            <div class="photograph" data-type="sprite" data-offsety="1250" data-xposition="25%" data-speed="2"
                style="background-position: 25% 650px;"></div>
            <article>
                <div class="w1184">
                    <span>TEL：0571-87337680 &nbsp OR
                        &nbsp
                        <a href="https://www.linkedin.com/company/31479085/admin/"><img style="width: 14px" src="./images/linkedin.png"/></a>
                        <a href="https://www.instagram.com/jojoliu9399/"><img style="width: 14px" src="./images/instagram.png"/></a>
                        <a href="https://twitter.com/JojoLiu17734987"><img style="width: 14px" src="./images/twitter.png"/></a>
                        <a href="https://www.facebook.com/leafpowdercoatings"><img style="width: 14px" src="./images/Facebook.png"/></a>
                    </span>
                    <span>Hubei Yichang</span>
                </div>
                <hr>
                <p class="companyName">@2020 Hubei Leaf New Material Technology Co.,Ltd</p>
                <p>鄂ICP备19019774号</p>
            </article>
        </section>
    </div>
</body>
<!--<script src="./js/jquery-2.1.0.js "></script>-->
<script src="./js/common.js"></script>
<script src="./js/sliding.js"></script>
<script src="js/imagePreview.js" type="text/javascript"></script>
<script>
    ImagePreview.init({id:"homeGoods"});//传参模式一：所有img的父级元素id（不支持跨级，跨级请用第二种）

    $(document).ready(function () {
        header.init()
        footer.init()
        var contentArr = ['To provide the best products and technical solutions for customers!',
            'To provide the best products and technical solutions for customers!',
            'To provide the best products and technical solutions for customers!',
            'To provide the best products and technical solutions for customers!'
        ]
        $(".sectionBox2 .w1184 ul li ").each(function (index) {
            $(this).children('img').hover(function () {
                $(this).attr('src', 'http://xiaoyedianao.gitee.io/picture_storage_area/images/mesa' + (index + 1) + '_er.png')
                $('#content').html(contentArr[index])
                $('#content').css({
                    'visibility': 'visible',
                    'opacity': '0'
                })
                $('#content').animate({
                    'opacity': '1'
                }, 200)
            }, function () {
                $(this).attr('src', 'http://xiaoyedianao.gitee.io/picture_storage_area/images/mesa' + (index + 1) + '.png')
                $('#content').html('')
            })
        })
    })
</script>

</html>